<template>
  <el-dialog v-model="visible" title="关联采购单号" width="520" show-footer show-zoom resize @close="close">
    <template #default>
      <el-form ref="formRef" :rules="rules" :model="form" label-align="right" label-width="120" size="default"
        label-position="top">
        <el-form-item label="采购单号" prop="receipt_number">
          <el-input v-model="form.receipt_number" placeholder="请输入采购单号"></el-input>
        </el-form-item>
        <div class="text-gray-400">*多个采购单号用英文逗号隔开！</div>
      </el-form>
    </template>

    <template #footer>
      <div class="flex justify-center py-2">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="save(formRef)">保 存</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="ComModal">
import { relateOrder } from '../api/index'
import { reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'

const visible = ref(false)
const loading = ref(false)
const formRef = ref(null)
const emits = defineEmits(['query'])

const props = defineProps({
  options: {
    type: Object,
    default: {},
  }
})

const data = reactive({
  form: {},
  handleType: null,
  rules: {
    receipt_number: [{
      required: true, message: '请输入采购单号', trigger: 'blur'
    }],

  },
})
const { form, rules } = toRefs(data)

const open = (id) => {
  form.value.express_order_id = id
  visible.value = true
}

const initForm = () => {
  form.value = getForm()
}
// 初始化
const getForm = () => {
  return {}
}

onMounted(() => {
  initForm()
})

const getDetail = async (id) => {
  // try {
  //   const res = await getDispenserDetail({
  //     id
  //   })
  //   form.value = res.data
  //   filterList()
  // } catch (e) {
  //   throw Error(e)
  // }
}

const save = () => {
  if (!formRef.value) return
  formRef.value.validate((valid) => {
    if (valid) {
      loading.value = true
      relateOrder({
        ...form.value,
        receipt_number: form.value.receipt_number.split(','),
      })
        .then((res) => {
          ElMessage.success(res.message)
          emits('query')
          close()
        })
        .finally((e) => {
          loading.value = false
        })
      // if (form.value.id) {
      //   relateOrder(form.value)
      //     .then((res) => {
      //       ElMessage.success(res.message)
      //       emits('query')
      //       close()
      //     })
      //     .finally((e) => {
      //       loading.value = false
      //     })
      // } else {
      //   saveDispenser(form.value)
      //     .then((res) => {
      //       ElMessage.success(res.message)
      //       emits('query')
      //       close()
      //     })
      //     .finally((e) => {
      //       loading.value = false
      //     })
      // }
    }
  })
}
const close = () => {
  initForm()
  visible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.borderNone {
  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none
  }
}
</style>
